<template>
  <div>
    <div v-show="isShowLogin" class="mask"></div>
    <div v-show="isShowLogin" class="dialog">
      <div>
        <button @click="WakeupSwitch" class="close">✕</button>
        <ul class="login-top">
          <h4>登录酷狗音乐</h4>
        </ul>
        <div class="login-main">
          <input
            class="form-input"
            placeholder="手机号： 请输入手机号"
            type="text"
            v-model="phone"
          />
          <input
            class="form-input"
            placeholder="验证码： 请输入短信验证码"
            type="password"
            v-model="code"
          />
          <span @click="sendCode" v-if="!isSend">发送验证码</span>
          <span v-else>重新发送({{ isSend ? time + "s" : "" }})</span>
          <button class="form-btn" @click="goLogin">登录</button>
        </div>
        <div class="toolTip"></div>
        <div class="qrCode"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqCode, reqVerifyCode } from "@/api";
import { mapActions } from "vuex";
export default {
  name: "Masks",
  data() {
    return {
      isShowLogin: false,
      phone: "",
      code: "",
      isSend: false,
      time: 5,
      timeId: "",
      maxLength: 4,
    };
  },
  mounted() {
    this.$bus.$on("show", this.Switch);
  },
  methods: {
    ...mapActions("user", ["getLogin"]),
    // 点击叉号关闭
    WakeupSwitch() {
      this.isShowLogin = false;
    },
    // 切换为显示状态
    Switch(flag) {
      this.isShowLogin = flag;
    },
    // 发送验证码
    async sendCode() {
      this.isSend = true;
      // 开始倒计时
      this.setCountDown();
      await reqCode(this.phone);
    },
    // 倒计时
    setCountDown() {
      this.timeId = setInterval(() => {
        const time = this.time - 1;
        if (this.time <= 0) {
          clearInterval(this.timeId);
          this.isSend = false;
        }
        this.time = time;
      }, 1000);
      this.time = 5;
    },

    // 校验验证码
    async verifyCode(code) {
      if (code.length === this.maxLength) {
        await reqVerifyCode({
          phone: this.phone,
          captcha: code,
        });
      }
    },

    async goLogin() {
      let code = this.code;
      await this.verifyCode(code);
      // 校验验证码成功 发送登录请求
      await this.getLogin({ phone: this.phone, captcha: this.code });
      this.isShowLogin = false;
    },
  },
};
</script>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
.mask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 440px;
  height: 378px;
  background-color: #fff;
  z-index: 1000;
  border-radius: 2px;
}

.dialog div {
  width: 400px;
  height: 378px;
  margin: 0 auto;
}

.login-top h4 {
  font-size: 20px;
  color: #333;
  text-align: center;
  line-height: 1;
  padding-top: 66px;
  padding-bottom: 29px;
  font-weight: normal;
}

.dialog .login-main {
  width: 400px;
  height: 178px;
}

.login-main .form-input {
  width: 400px;
  height: 44px;
  border: 1px solid #ccc;
  background: #f6f6f6;
  padding: 7px 10px;
  box-sizing: border-box;
  color: #a7a7a7;
  font-size: 13px;
  outline: none;
}

.login-main .form-input:first-child {
  margin-bottom: 11px;
}

.login-main .form-input:last-child {
  position: relative;
}

.login-main span {
  position: absolute;
  top: 183px;
  left: 310px;
  color: #2299ed;
  cursor: pointer;
}

.form-btn {
  display: block;
  width: 100%;
  height: 40px;
  font-size: 16px;
  color: #fff;
  border: 0;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background-color: #2299ed;
  margin-top: 40px;
}

.close {
  position: absolute;
  top: -39px;
  right: 0;
  color: #99b4c2;
  background-color: rgba(0, 0, 0, 0);
  border: 0;
  font-size: 30px;
  cursor: pointer;
}
</style>
